<template>
  <div class="face-container" v-if="visible">
    <div class="face">
      <slot name="title" />
      <div class="qrcode">
        <a-spin :spinning="qrcodeLoading">
          <cQrcode :url="qrcodeUrl" />
        </a-spin>
      </div>
      <div class="tip tc">若完成刷脸后长时间无反应，请点击下方按钮</div>
      <c-button
        type="danger"
        :loading="faceFinishLoading"
        @click="faceFinish"
        :disabled="faceFinishDisabled"
      >
        <c-countdown
          ref="countdown"
          @finish="faceFinishDisabled = false"
          v-if="faceFinishDisabled"
        />
        <span>我已刷脸</span>
      </c-button>
      <div class="faceType">
        <a-radio-group v-model="faceType" @change="changeFaceType">
          <a-radio :value="2">
            支付宝刷脸认证
          </a-radio>
          <a-radio :value="1">
            微信刷脸认证
          </a-radio>
        </a-radio-group>
      </div>
    </div>
  </div>
</template>

<script>
import cQrcode from "@/components/qrcode";
import { userfaceauth, esignauthdetail } from "@/api/certify";
import socketDict from "@/dict/socket";
import cCountdown from "@/components/countdown-progress";

export default {
  components: {
    cQrcode,
    cCountdown
  },
  props: {
    // 显隐
    value: {
      type: Boolean,
      default: () => {
        return false;
      }
    },
    // 用于请求二维码地址
    userData: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  data() {
    return {
      faceType: 2, // 刷脸方式
      qrcodeLoading: false, // 二维码loading
      qrcodeUrl: undefined, // 二维码地址
      faceFinishLoading: false, // 查询刷脸结果loading
      faceFinishDisabled: true
    };
  },
  computed: {
    visible: {
      get() {
        return this.value;
      },
      set(n) {
        this.$emit("input", n);
      }
    },
    msg() {
      return this.$store.state.socket && this.$store.state.socket.message;
    }
  },
  watch: {
    msg(newVal) {
      if (
        newVal.code === socketDict.code.realnameFace &&
        newVal.data.messageType === 200
      ) {
        // 0代表成功 messageType是200代表刷脸消息
        if (newVal.data.code === 0) {
          this.visible = false;
          this.$emit("success");
        } else {
          this.getQrcode();
          this.$message.error("刷脸失败，请重新刷脸");
          this.$emit("fail");
        }
      }
    },
    // 显示时获取二维码地址
    visible(v) {
      if (v) {
        this.getQrcode();
        this.$nextTick(() => {
          this.$refs.countdown.open();
        });
      }
    }
  },
  methods: {
    // 已完成刷脸，查询刷脸结果
    faceFinish() {
      this.faceFinishLoading = true;
      esignauthdetail({
        flowId: this.flowid
      })
        .then(res => {
          if (res.status === "SUCCESS") {
            this.visible = false;
            this.$emit("success");
          } else if (res.status === "FAIL") {
            this.getQrcode();
            this.$message.error("刷脸失败，请重试");
          } else {
            this.$message.warning("请先进行刷脸");
          }
        })
        .finally(() => {
          this.faceFinishLoading = false;
        });
    },
    // 切换刷脸方式
    changeFaceType() {
      this.getQrcode();
    },
    getQrcode() {
      this.qrcodeLoading = true;
      // 获取支付宝/微信刷脸二维码
      userfaceauth({
        userFullName: this.userData.name,
        residentId: this.userData.id,
        faceAuthMode: this.faceType
        // callbackUrl: "https://h5.manytrader.net/facePay"
      })
        .then(res => {
          this.qrcodeUrl = res.authUrl;
          this.flowid = res.flowId;
        })
        .finally(() => {
          this.qrcodeLoading = false;
        });
    }
  }
};
</script>

<style lang="scss" scoped>
.face-container {
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.45);
  // width: -webkit-fill-available;
  width: 100%;
  height: 100%;
  z-index: 9;
  .ant-alert {
    text-align: start;
  }
  .face {
    background-color: #fff;
    width: 410px;
    margin: 0 auto;
    text-align: center;
    padding: 30px 20px;
    margin-top: 70px;
    .qrcode {
      margin: 30px 0 10px;
    }
    .tip {
      margin-bottom: 10px;
    }
    .faceType {
      margin-top: 20px;
    }
  }
}
</style>
